import React, { Component } from 'react';
import { Layout, Modal, message } from 'antd';
import { Route } from "react-router-dom"
import http from '../../api/http';
import "./Home.css"
import store from '../../reducer/reducer'
import { matchPath } from '../../api/matchpath' //查询匹配地址的面包屑
import Cookies from 'js-cookie'

import Login from "../Login/Login"
import Head from "../../components/Head/Head"
import SiderBar from "../../components/SiderBar/SiderBar"
import TableList from "../../components/TableList/TableList"

import GoodsPayDetails from '../../components/GoodsPayDetails/GoodsPayDetails'
const { Header, Content, Sider } = Layout;
const { confirm } = Modal;
class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cur_breadcrumb: "",
      change_path: '',
      switch_route: true,
      commit_change:null
    }
    store.subscribe(() => {
      if(store.getState().controlCommunity.value){
        if(store.getState().controlCommunity.value.is_change){
          this.setState({
            commit_change:true
          })
        }
      }
      this.setState({
        cur_breadcrumb: store.getState().controlBreadcrumb.cur_breadcrumb
      })
    })
  }
  componentDidMount() {
    matchPath(this.props.location.pathname)
  }
  componentWillMount() {
    // Cookies.set('community_id', '', { expires: 30 });
    http('/community', {
      method: 'get', data: {}
    }).then(res => {
      this.setState({
        community_list: res.data,
        defaultValue: res.data[0].id
      })
      Cookies.set('community_id', res.data[0].id, { expires: 30 })
    }).catch(res => {
      if(res.msg){
        message.error(res.msg);
      }
      setTimeout(() => {
        this.setState({
          loading: false
        })
      }, 1000);
    })
    if (this.props.location.pathname === '/index/Login') {
      this.setState({
        switch_route: false
      })
    }
    if (Cookies.get('login') === 'false' || Cookies.get('login') === undefined) {
      this.props.history.push('/index/Login')
      this.setState({
        switch_route: false
      })
    } else {
      this.setState({
        switch_route: true
      })
    }
  }
  componentWillUpdate(nextSprops,nextState) {
    if (nextSprops.location.pathname !== this.props.location.pathname) {//判断前后两路由是否不等，防止无限循环
      matchPath(nextSprops.location.pathname)
      if (Cookies.get('login') === 'false' || Cookies.get('login') === undefined) {
        this.props.history.push('/index/Login')
        this.setState({
          switch_route: false
        })
      } else {
        this.setState({
          switch_route: true
        })
      }
    }
    if(nextState.commit_change!==this.state.commit_change&&nextState.commit_change===true){
      http('/community', {
        method: 'get', data: {}
      }).then(res => {
        this.setState({
          community_list: res.data,
          defaultValue: res.data[0].id,
          commit_change:false
        })
        Cookies.set('community_id', res.data[0].id, { expires: 30 })
      }).catch(res => {
        setTimeout(() => {
          this.setState({
            loading: false
          })
        }, 1000);
      })
    }
  }
  signOut = () => {
    let _this = this
    confirm({
      title: '',
      okText: '确认',
      cancelText: '取消',
      content: '确定要退出系统吗？',
      onOk() {
        Cookies.set('login', 'false', { expires: 30 });
        Cookies.set('account', '', { expires: 30 });
        Cookies.set('password', '', { expires: 30 });
        _this.props.history.push('/index/Login')
      },
      onCancel() {
      },
    });
  }
  changeCommunite = (e) => {
    this.setState({
      defaultValue: e
    })
  }
  toControl=()=>{
    this.props.history.push('/')
  }
  render() {
    // 在父 route 中，被匹配的子 route 变成 props
    return (
      <div style={{ height: '100%' }}>
        {this.state.switch_route &&
          <Layout>
            <Header name={11} className="header">
              {/* 头 */}
              <Head changeCommunite={this.changeCommunite} signOut={this.signOut} toControl={this.toControl} communityList={this.state.community_list} defaultValue={this.state.defaultValue} />
            </Header>
            <Layout>
              {/* 侧边栏 */}
              <Sider width={200} style={{ background: '#fff' }}>
                <Route path="/index" component={SiderBar} ></Route>
              </Sider>
              <Layout style={{ padding: '0 15px 15px' }}>
                <div className="home-breadcrumb">{this.state.cur_breadcrumb}</div>
                <Content className='home-main' style={{ background: '#fff', margin: 0, height: '860px'}} id='s'>
                
                  <Route exact path="/index/goods_order" component={TableList} ></Route>
                  <Route exact path="/index/goods_paydetails/:id" component={GoodsPayDetails} ></Route>
                </Content>
              </Layout>
            </Layout>
          </Layout>
        }
         {!this.state.switch_route &&
        <Route path="/index/Login" component={Login} />
         }
      </div>
    )
  }
}
// function mapStateToProps(state) {
//   return state
// }

// function mapDispatchToProps(dispatch) {
//   return {
//     controlBreadcrumb (a) {
//       dispatch({
//         type: 'CHANGE_BREADCRUMB',
//         value: a
//       })
//     }
//   }
// }
export default Home;
